<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:48
-->
<template>
  <div ref="Bottom4_container" style="height: 95%"></div>
</template>
<script>
import { Radar } from '@antv/g2plot';

export default ({
  data(){
    return{
      dataArr:[
        {
    "item": "Design",
    "user": "a",
    "score": 70
  },
  {
    "item": "Design",
    "user": "b",
    "score": 30
  },
  {
    "item": "Development",
    "user": "a",
    "score": 60
  },
  {
    "item": "Development",
    "user": "b",
    "score": 70
  },
  {
    "item": "Marketing",
    "user": "a",
    "score": 50
  },
  {
    "item": "Marketing",
    "user": "b",
    "score": 60
  },
  {
    "item": "Users",
    "user": "a",
    "score": 40
  },
  {
    "item": "Users",
    "user": "b",
    "score": 50
  },
  {
    "item": "Test",
    "user": "a",
    "score": 60
  },
  {
    "item": "Test",
    "user": "b",
    "score": 70
  },
  {
    "item": "Language",
    "user": "a",
    "score": 70
  },
  {
    "item": "Language",
    "user": "b",
    "score": 50
  }
      ]
    }
  },
  mounted() {
    //5.调用
    this.initChart();
  },
  methods:{
    initChart() {
      const radarPlot = new Radar(this.$refs.Bottom4_container, {
      data:this.dataArr,
      xField: 'item',
      yField: 'score',
      seriesField: 'user',
      meta: {
        score: {
          alias: '分数',
          min: 0,
          max: 80,
        },
      },
      xAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null,
            },
          },
        },
      },
      yAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {
              lineDash: null,
            },
          },
        },
      },
      // 开启辅助点
      point: {
        size: 2,
      },
    });
    radarPlot.render();
    }
  }
})
</script>